<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBackList"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">标题：</div>
              </el-col>
              <el-col :span="6" class="information">
                <div class="grid-content">{{ helpInfo.title || '--' }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">简介：</div>
              </el-col>
              <el-col :span="6" class="information">
                <div class="grid-content">{{ helpInfo.about || '--' }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">排序：</div>
              </el-col>
              <el-col :span="6" class="information">
                <div class="grid-content">{{ helpInfo.sort || '--' }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">适用页面：</div>
              </el-col>
              <el-col :span="6" class="information">
                <div class="grid-content">{{ helpInfo.menuName || '--' }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">是否显示：</div>
              </el-col>
              <el-col :span="6" class="information">
                <div class="grid-content">{{ helpInfo.isShow || '--' }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="4" class="labelWidth">
                <div class="grid-content">内容：</div>
              </el-col>
              <el-col :span="20" class="information">
                <div class="grid-content" v-html="helpInfo.content"></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="text-align: center; margin-top: 24px">
                <el-button @click="goBackList" class="commonBut"
                  >返回列表</el-button
                >
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'helpDetail',

  data() {
    return {
      titleText: '查看操作说明',
      back: true,
      helpId: '',
      helpInfo: '',
    }
  },
  computed: {},
  created() {
    this.helpId = this.$route.query.helpId
    this.getHelpInfo(this.helpId)
  },
  mounted() {},
  methods: {
    goBackList() {
      this.$router.push('/home/help/helpTab')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/help/helpTab',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getHelpInfo(id) {
      this.axios({
        method: 'post',
        url: 'api-m/help/detail',
        data: {
          helpId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.helpInfo = response.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>
<style scoped lang="less">
.mainCon /deep/ .ueditorBox {
  line-height: 20px;
}

.notice {
  color: #666;
  // margin-top: 40px;
  // line-height: 25px;
}

.content /deep/ #container /deep/ .edui-default .edui-editor-breadcrumb {
  display: none;
}
.upLoadDom:hover {
  cursor: pointer;
}
.mainCon {
  top: 198px;
}
.proInputWidth {
  width: 500px;
}

.labelWidth {
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
}

.detailInfo {
  padding: 18px 0 5px 0;
}

.detailInfoItem {
  margin-top: 28px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
